import './index.scss'
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import { Editor, EditorProvider, useCurrentEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  BoldOutlined,
  ClearOutlined,
  CodeOutlined,
  ItalicOutlined,
  OrderedListOutlined,
  StrikethroughOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons'
import { debounce } from 'lodash'
import PIcon from '../pIcon'
import { Flex } from 'antd'

export interface IRichTextEditorProps {
  content?: string
  onChange?: (content: Editor) => void
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO' | ''
  score?: number
}
export default function RichTextEditor(props: IRichTextEditorProps) {
  const {
    content = '',
    onChange = () => {},
    state = 'QUESTYPE',
    score = 0,
  } = props

  const extensions = [
    Color.configure({ types: [TextStyle.name, ListItem.name] }),
    TextStyle,
    Image.configure({
      inline: true,
      allowBase64: true,
    }),
    StarterKit.configure({
      bulletList: {
        keepMarks: true,
        keepAttributes: false,
      },
      orderedList: {
        keepMarks: true,
        keepAttributes: false,
      },
    }),
  ]

  const MenuBar = () => {
    const { editor } = useCurrentEditor()

    if (!editor || ['READ', 'TODO'].includes(state)) {
      return null
    }

    return (
      <div className="menu-bar">
        <span
          onClick={() => editor.chain().focus().undo().run()}
          className={
            !editor.can().chain().focus().undo().run() ? 'do-disabled' : ''
          }>
          <ArrowLeftOutlined />
        </span>
        <span
          onClick={() => editor.chain().focus().redo().run()}
          className={
            !editor.can().chain().focus().redo().run() ? 'do-disabled' : ''
          }>
          <ArrowRightOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleBold().run()}>
          <BoldOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleItalic().run()}>
          <ItalicOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleStrike().run()}>
          <StrikethroughOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleCode().run()}>
          <CodeOutlined />
        </span>

        <span onClick={() => editor.chain().focus().toggleBlockquote().run()}>
          <PIcon name="icon-paragraph"></PIcon>
        </span>
        <span onClick={() => editor.chain().focus().setHardBreak().run()}>
          <PIcon name="icon-link-break"></PIcon>
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 1 }).run()
          }>
          <PIcon name="icon-h-1"></PIcon>
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 2 }).run()
          }>
          <PIcon name="icon-h-2"></PIcon>
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 3 }).run()
          }>
          <PIcon name="icon-h-3"></PIcon>
        </span>
        {/* 
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 4 }).run()
          }
          className={
            editor.isActive('heading', { level: 4 }) ? 'is-active' : ''
          }>
          H4
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 5 }).run()
          }
          className={
            editor.isActive('heading', { level: 5 }) ? 'is-active' : ''
          }>
          H5
        </span>
        <span
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 6 }).run()
          }
          className={
            editor.isActive('heading', { level: 6 }) ? 'is-active' : ''
          }>
          H6
        </span> */}
        <span onClick={() => editor.chain().focus().toggleBulletList().run()}>
          <UnorderedListOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleOrderedList().run()}>
          <OrderedListOutlined />
        </span>
        <span onClick={() => editor.chain().focus().toggleCodeBlock().run()}>
          <PIcon name="icon-code"></PIcon>
        </span>

        {/* <span
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
          className={editor.isActive('blockquote') ? 'is-active' : ''}>
          Blockquote
        </span>
        <span onClick={() => editor.chain().focus().setHorizontalRule().run()}>
          Horizontal rule
        </span>
        <span onClick={() => editor.chain().focus().setHardBreak().run()}>
          Hard break
        </span> */}
        {/* 
        <span onClick={() => }>
          <ClearOutlined />
        </span> */}

        <span
          onClick={() => {
            editor.chain().focus().unsetAllMarks().run()
            editor.chain().focus().clearNodes().run()
          }}>
          <ClearOutlined />
        </span>
        {/* <span
          onClick={() => editor.chain().focus().setColor('#958DF1').run()}
          className={
            editor.isActive('textStyle', { color: '#958DF1' })
              ? 'is-active'
              : ''
          }>
          Purple
        </span> */}
      </div>
    )
  }

  const onUpdate = debounce((editor: Editor) => {
    if (onChange) {
      onChange(editor)
    }
  }, 100)

  return (
    <div
      className={`${
        ['READ', 'PREVIEW', 'TODO'].includes(state)
          ? 'editor disabled_editor'
          : 'editor'
      }`}>
      {state === 'WRITE' ? (
        <EditorProvider
          editable={['WRITE'].includes(state)}
          slotBefore={<MenuBar />}
          extensions={extensions}
          content={content}
          onUpdate={(props) => {
            if (['WRITE'].includes(state)) onUpdate(props.editor)
          }}></EditorProvider>
      ) : (
        <Flex vertical={state === 'QUESTYPE' ? true : false}>
          {score > 0 && <span className="score">({score}分)</span>}
          <EditorProvider
            editable={['WRITE'].includes(state)}
            slotBefore={<MenuBar />}
            extensions={extensions}
            content={content}
            onUpdate={(props) => {
              if (['WRITE'].includes(state)){
                onUpdate(props.editor)
              }
            }}></EditorProvider>
        </Flex>
      )}
    </div>
  )
}
